<template>
  <div class="fenlei">
    <div class="top">
      <span><van-icon name="arrow-left" color="skyblue" /></span>
    </div>
    <div class="box">
       <ul>
        <li><van-icon name="seach" /><input type="text" placeholder="搜索"></li>
        <li>点餐</li>
        <li>评价<span>4.5</span></li>
        <li>商家</li>
      </ul>
    </div>
    <div class="shopgoods">
        <van-sidebar v-model="activeKey">
      <van-sidebar-item title="热销" />
      <van-sidebar-item title="优惠" />
      <van-sidebar-item title="三文鱼" />
      <van-sidebar-item title="刺身" />
      <van-sidebar-item title="年货礼品" />
      <van-sidebar-item title="野生大对虾" />
      <van-sidebar-item title="冻货区" />
      <van-sidebar-item title="贝壳螺类" />
      <van-sidebar-item title="鲜虾活鱼" />
      <van-sidebar-item title="海鲜蟹类" />
   </van-sidebar>
     <ShopCom  :activeKey="activeKey"/>
    </div>
   
     
  </div>
</template>

<script>
import ShopCom from "../../components/ShopCom.vue"
export default {
  components: {
     ShopCom,
  },
  data() {
    return {
      activeKey: 0,
    };
  },
}
</script>

<style lang="scss" scoped>
.fenlei{
  padding: 0 10px;
  .top{
    >span{
    display: block;
    padding: 10px 0;
    color: skyblue;
  }
  
  }
}
   .box {
    ul{
    display: flex;
    align-items: center;
    >li{
      list-style: none;
      padding: 5px 10px 2px;
      line-height: 10px;
      font-weight: bold;
      span{
        font-size: 12px;
      }
    }
    >li:nth-child(1){
       border-radius: 20px;
       background-color: #ccc;
       vertical-align: middle;
       input{
        width: 30px;
        outline: none;
        border: none;
        background-color: #ccc;
        color: #000;
       }
    }
  }
}
.shopgoods{
  display: flex;
}
</style>